import { processData } from '@/utils/tree';
import { Button, Input, message, Modal, ModalProps, Space, TreeSelect } from 'antd';
import { memo, useEffect, useState } from 'react';
import datasetService from '@/api/services/datasetService';
import { SvgIcon } from '@/components/icon';
import { useParams } from '@/router/hooks';
import Modals from '@/components/modals/Modals';
import { convertHeaderAuthToFormData, formatAuthData, formatAuthConfig } from '@/utils/auth';
import useModal from '@/hooks/use-modal/useModal';
import AuthModal from '@/components/auth-modal/auth-modal';

interface Props {
  editType: string;
  title: string;
  open: boolean;
  onConfirm: (name: string, headerAuth: object) => void;
  updateDataset?: any;
  defaultAuthConfig?: any;
}

const NewDatasetModal = ({ editType, open, onConfirm, onCancel, title, updateDataset, defaultAuthConfig }: Props & ModalProps) => {
  const [datasetName, setDatasetName] = useState<string>('');
  const [authData, setAuthData] = useState<string>('');
  const [currentAuthConfig, setCurrentAuthConfig] = useState<any>({});
  const [headerAuth, setHeaderAuth] = useState<any>({});
  const { appId = '' } = useParams() as { appId: string };
  const modal = useModal('input');
  useEffect(() => {
    console.log(editType, '--editType')
    if (editType == 'create') {
      setDatasetName('');
      if (defaultAuthConfig) {
        setAuthData(formatAuthData(defaultAuthConfig));
        setCurrentAuthConfig(defaultAuthConfig);
        setHeaderAuth(defaultAuthConfig);
      }
    } else {
      setDatasetName(updateDataset?.name);
      if (updateDataset?.headerAuth) {
        setCurrentAuthConfig(updateDataset?.headerAuth);
        setAuthData(formatAuthData(updateDataset?.headerAuth));
        setHeaderAuth(updateDataset?.headerAuth);
      } else {
        setCurrentAuthConfig({});
        setAuthData('无');
        setHeaderAuth({});
      }
    }
  }, [open]);

  const handleSetting = () => {
    modal.input.open();
  };

  const handleAuthSubmit = (value: object) => {
    setCurrentAuthConfig(value);
    setAuthData(formatAuthData(value));
    setHeaderAuth(formatAuthConfig(value))
    modal.input.close();
  };

  return (
    <Modals
      title={
        <div >
          {editType !== 'update' && '新建'}{title ? title : editType == 'dataset' ? '知识库' : '文件夹'}
        </div>
      }
      open={open}
      onOk={() => {
        onConfirm(datasetName, headerAuth);
      }}
      onCancel={(e) => {
        onCancel && onCancel(e);
        setDatasetName('');
        setHeaderAuth({});
      }}
      okText="确定"
      cancelText="取消"
      width={500}
    >
      <div className='mb-2'>
        <div className='my-2 text-[var(--text-secondary)]'>
          业务办理接口集名称
          <span className="text-error text-xs ml-1">*</span>
        </div>
        <Input placeholder='请输入业务办理接口集名称' value={datasetName} onChange={(e) => setDatasetName(e.target.value?.trim())} />
      </div>
      <div>
        <div className="mb-2 text-[var(--text-secondary)]">
          鉴权配置
        </div>
        <div className="bg-[var(--fill-quinary)] h-11 rounded-md px-3 w-full text-text-5 text-sm font-normal flex items-center justify-between">
          <div>{authData || '无'}</div>
          <div
            className='flex items-center gap-1 text-[var(--geekblue-6)] font-normal text-sm cursor-pointer'
            onClick={() => { handleSetting() }}
          >
            <SvgIcon icon='manage' size={16} />
            设置
          </div>
        </div>
      </div>
      <AuthModal
        open={modal.input.isOpen}
        onCancel={modal.input.close}
        onSubmitOk={handleAuthSubmit}
        title='鉴权配置'
        defaultValue={convertHeaderAuthToFormData(currentAuthConfig)}
      />
    </Modals>
  );
};

export default memo(NewDatasetModal);
